<template>
	<main-container>
		<Detail ref="detailRef" />
		<!-- 搜索 -->
		<el-form :model="state.queryParams" ref="queryRef" :inline="true" v-show="showSearch">
			<el-form-item label="手机号">
				<el-input v-model="state.queryParams.phone" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="initPage">
					<el-icon> <ele-Search /> </el-icon>搜索</el-button
				>
				<el-button @click="resetQuery">
					<el-icon> <ele-Refresh /> </el-icon>重置</el-button
				>
			</el-form-item>
		</el-form>

		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div></div>
			<right-toolbar :searchBtn="true" :refreshBtn="true" @search="showSearch = !showSearch" @refresh="initPage"></right-toolbar>
		</div>
		<el-tabs v-model="state.activeName" type="card" @tab-click="tabHandle">
			<el-tab-pane label="全部" name="all"></el-tab-pane>
			<el-tab-pane label="微信小程序" name="WX_MA"></el-tab-pane>
			<el-tab-pane label="APP" name="APP"></el-tab-pane>
			<el-tab-pane label="普通H5" name="H5"></el-tab-pane>
		</el-tabs>
		<!-- 列表 -->
		<el-table v-loading="loading" :data="state.tableData" border>
			<el-table-column prop="avatarUrl" label="头像">
				<template #default="scope">
					<el-avatar :src="scope.row.avatarUrl"></el-avatar>
				</template>
			</el-table-column>

			<el-table-column prop="nickName" label="昵称"></el-table-column>
			<el-table-column prop="phone" label="手机号" />
			<el-table-column prop="sex" label="性别">
				<template #default="scope"> <dict-tag :options="user_sex" :value="scope.row.sex"></dict-tag></template>
			</el-table-column>
			<el-table-column prop="userSource" label="来源">
				<template #default="scope"> <dict-tag :options="user_source" :value="scope.row.userSource"></dict-tag></template>
			</el-table-column>
			<el-table-column prop="province" label="所在省份"></el-table-column>
			<el-table-column prop="city" label="所在城市"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" />
			<el-table-column label="操作" width="200" align="center">
				<template #default="scope">
					<el-button link type="primary" v-auth="'user:userinfo:get'" @click="doDetail(scope.row)">
						<el-icon> <ele-View /> </el-icon>详情</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<pagination
			v-model:total="state.page.total"
			v-model:currentPage="state.page.currentPage"
			v-model:pageSize="state.page.pageSize"
			@changePage="initPage"
		></pagination>
	</main-container>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, ref, reactive } from 'vue';
import { getPage } from '/@/api/user/userinfo';
import { useDict } from '/@/utils/dict';
const Detail = defineAsyncComponent(() => import('./detail.vue'));
// 字典
const { user_source, user_sex } = useDict('user_source', 'user_sex');
const state = reactive({
	queryParams: { phone: '', userGrade: '' },
	page: {
		total: 0, // 总页数
		currentPage: 1, // 当前页数
		pageSize: 10, // 每页显示多少条
		ascs: [],
		descs: 'create_time',
	},
	tableData: [],
	activeName: 'all',
});
const showSearch = ref(true);
const loading = ref(false);
const detailRef = ref();

const initPage = async () => {
	loading.value = true;
	let params = {
		current: state.page.currentPage,
		size: state.page.pageSize,
		ascs: state.page.ascs,
		descs: state.page.descs,
		userSource: state.activeName != 'all' ? state.activeName : '',
	};
	await getPage(Object.assign(params, state.queryParams))
		.then((response) => {
			state.tableData = response.data.data.records;
			state.page.total = response.data.data.total;
			loading.value = false;
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 重置搜索表单
 */
const resetQuery = () => {
	state.queryParams = { phone: '', userGrade: '' };
};
/**
 * 用户来源切换
 */
const tabHandle = (event: any) => {
	state.activeName = event.paneName;
	initPage();
};
const doDetail = (row: any) => {
	detailRef.value.initPage(row);
};
initPage();
</script>
<style scoped></style>
